<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title data-localize="print.title">测试机</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .u-line {
            margin: 0 auto;
            width: 1170px;
            height: 720px;
            overflow: hidden;
            margin-left: 310px;
            box-sizing: border-box;
        }

        .u-road {
            position: relative;
            height: 200px;
            width: 1250px;
            float: right;
            margin-top: 110px;
            -webkit-transform: rotateY(180deg);
        }

        .left {
            float: left;
            width: 640px;
            /* border: 1px solid red; */
        }

        .left > div {
            /* border: 1px solid red; */
            float: right;
        }

        .u-road p {
            -webkit-transform: rotateY(180deg);
        }

        .u-road span {
            display: inline-block;
            -webkit-transform: rotateY(180deg);
        }

        .u-roadcon {
            position: relative;
            float: left;
        }

        .u-roadcon:after {
            content: '';
            display: block;
            clear: both;
        }

        .u-road:after {
            content: '';
            display: block;
            clear: both;
        }

        .u-machine {
            position: relative;
            float: left;
            margin: 0 35px 0 45px;
            width: 198px;
            height: 198px;
            border-radius: 50%;
            background: #bdcee2;
            border: 1px solid #1d83bc;
            z-index: 11;
        }

        .u-machine .u-boxcon {
            position: absolute;
            background: #bdcee2;
            margin: 0;
        }

        .u-machine .u-boxcon:nth-child(1) {
            right: -36px;
            top: 64px;
        }

        .u-machine .u-boxcon:nth-child(2) {
            left: 64px;
            top: -36px;
        }

        .u-machine .u-boxcon:nth-child(3) {
            left: -36px;
            top: 64px;
        }

        .u-machine .u-boxcon:nth-child(4) {
            left: 64px;
            bottom: -36px;
        }

        .u-track {
            position: absolute;
            height: 28px;
            width: 61%;
            left: 405px;
            top: 85px;
            border-top: 1px solid #cecece;
            border-bottom: 1px solid #cecece;
        }

        .u-boxcon {
            position: relative;
            float: left;
            width: 68px;
            height: 68px;
            margin: 65px 0 65px 10px;
            background: #bdcee2;
            border-radius: 4px;
            border: 1px solid #29abe2;
            z-index: 10;
        }

        .right {
            z-index: 12;
        }

        .u-box {
            position: absolute;
            left: 0px;
            top: 0px;
            background: #bdcee2;
            width: 68px;
            height: 68px;
            border-radius: 4px;
            z-index: 10;
        }

        .u-boxcon p {
            margin: 0;
            padding: 0;
            position: absolute;
            top: -20px;
            line-height: 20px;
            font-size: 14px;
            color: #484848;
            width: 69px;
            text-align: center;
        }

        .u-scan img {
            position: relative;
            z-index: 2;
        }

        .u-scan .u-scanline {
            position: absolute;
            bottom: 20px;
            left: 5%;
            width: 90%;
            height: 5px;
            background: #484848;
            opacity: 0.8;
            z-index: 1;
        }

        .u-adjust2 {
            position: absolute;
            left: 10px;
            width: 71px;
            height: 20px;
        }

        .u-adjust1 {
            position: absolute;
            left: 490px;
            width: 71px;
            height: 20px;
        }

        .lineB .u-adjust2 {
            left: -430px;
        }

        .lineB .u-adjust1 {
            left: 10px;
        }

        .break {
            background: url('image/break.png') no-repeat 0 0;
            background-size: 100% 100%;
        }

        /*animations*/
        .scan {
            -webkit-transform: translateZ(0);
            -webkit-animation: scan 0.6s ease infinite;
        }

        @-webkit-keyframes scan {
            0% {
                -webkit-transform: translateY(0);
            }
            50% {
                -webkit-transform: translateY(-120px);
            }
            100% {
                -webkit-transform: translateY(0);
            }
        }

        .scan1 {
            -webkit-transform: translateZ(0);
            -webkit-animation: scan 0.6s ease infinite;
        }

        @-webkit-keyframes scan {
            0% {
                -webkit-transform: translateY(-120px);
            }
            50% {
                -webkit-transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-120px);
            }
        }

        .moveleft {
            -webkit-animation: moveleft 0.3s linear infinite;
            -webkit-backface-visibility: hidden;
            animation-fill-mode: backwards;
        }

        .rotate {
            -webkit-animation: action 0.3s linear infinite;
            -webkit-backface-visibility: hidden;
            animation-fill-mode: backwards;
        }

        .rotatee {
            -webkit-animation: actione 0.3s linear infinite;
            -webkit-backface-visibility: hidden;
            animation-fill-mode: backwards;
        }

        @-webkit-keyframes action {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(90deg);
            }
        }

        @-webkit-keyframes actione {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(-90deg);
            }
        }

        @-webkit-keyframes moveleft {
            0% {
                -webkit-transform: translateX(0);
            }
            100% {
                -webkit-transform: translateX(-80px);
            }
        }

        .stop {
            animation-play-state: paused;
        }

        .opposite {
            margin-top: 100px;
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .opposite span {
            display: inline-block;
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .opposite p, .opposite h1 {
            -webkit-transform: rotateX(180deg) rotateY(180deg);
        }

        .recieveboxB {
            position: absolute;
            margin: 0;
            left: 650px;
            top: 65px;
            z-index: 13;
        }

        .u-charge span {
            display: inline-block;
            line-height: 20px;
            margin-top: 25px;
            font-size: 12px;
        }

        .u-charge p {
            position: absolute;
            left: 0;
            width: 100%;
            top: -20px;
            line-height: 20px;
            font-size: 14px;
            margin: 0;
        }

        #u-boxe {
            position: absolute;
            opacity: 0;
        }

        .u-infos {
            height: 840px;
        }
    </style>

</head>
<body>
<div class='u-head'>
    <div class="u-headcon">
        <a href="index.html">
            <div class="u-mainpage" data-localize="back">回到首页</div>
        </a>
        <h3 data-localize="print.title">印刷机</h3>
        <div class="changeLang">
            <p class="u-lang"><span>中文</span><span>English</span></p>
            <div isopen="true" class="changeLangBtn"></div>
        </div>
    </div>
</div>
<div class="u-infos">
    <h2 data-localize="print.info_title">状态区域</h2>
    <div class="u-errorlist">
        <h3 data-localize="yichang">异常一览：</h3>
        <div class="u-errorlistcon">
        </div>
    </div>
    <p class="status"><span data-localize="print.running">运行状态：</span><span class="u-cube t-status"></span></p>
    <br>
</div>
<div class="t-con">
    <div class="u-line">
        <div class="u-boxcon needleft stop u-boxconspe" id="u-boxe">
            <div class="u-box u-boxe"></div>
        </div>
        <div class="u-road lineB" style="display: none">
            <div class="u-track"></div>
            <div class="u-roadcon left">
                <div class="u-boxcon needleft">
                    <div class="u-box u-box7"><p class="u-box-p7"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box8"><p class="u-box-p8"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box9"><p class="u-box-p9"></p></div>
                </div>
                <div class="u-boxcon needleft recieveboxB">
                    <div class="u-box u-box6"><p class="u-box-p6"></p></div>
                </div>
            </div>
            <div class="u-machine" id="u-machine">
                <div class="u-boxcon needrotatee">
                    <div class="u-box u-box4"><p class="u-box-p4"></p></div>
                </div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee" id="rotatea">
                    <div class="u-box u-box5 u-box-change"><p class="u-box-p5"></p></div>
                </div>
            </div>
            <div class="u-roadcon right">
                <!--<div class="u-adjust1 u-adjusttop"><img src="image/adjust.png" width="100%"></div>-->
                <!--<div class="u-adjust1 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>-->
                <!--<div class="u-adjust2 u-adjusttop"><img src="image/adjust.png" width="100%"></div>-->
                <!--<div class="u-adjust2 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>-->
                <div class="u-boxcon needleft">
                    <div class="u-box u-box3"><p class="u-box-p3"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box2"><p class="u-box-p2"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box1" id="u-box1-b"><p class="u-box-p1"></p></div>
                    <div class="u-handbar u-handbar1" id="u-handbar1-b">
                        <div class="u-hand"></div>
                    </div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box" style="background: #ddd9c3"></div>
                </div>
            </div>

        </div>

        <div class="u-road opposite lineA">
            <div class="u-track"></div>
            <div class="u-roadcon left">
                <div class="u-boxcon needleft">
                    <div class="u-box u-box7"><p class="u-box-p7"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box8"><p class="u-box-p8"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box9"><p class="u-box-p9"></p></div>
                </div>
                <div class="u-boxcon needleft recieveboxB">
                    <div class="u-box u-box6"><p class="u-box-p6"></p></div>
                </div>
            </div>
            <div class="u-machine" id="u-machine">
                <div class="u-boxcon needrotatee">
                    <div class="u-box u-box4"><p class="u-box-p4"></p></div>
                </div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee"></div>
                <div class="u-boxcon needrotatee" id="rotatea-b">
                    <div class="u-box u-box5 u-box-change"><p class="u-box-p5"></p></div>
                </div>
            </div>
            <div class="u-roadcon right">
                <div class="u-boxcon needleft">
                    <div class="u-box u-box3"><p class="u-box-p3"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box2"><p class="u-box-p2"></p></div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box u-box1" id="u-box1-b"><p class="u-box-p1"></p></div>
                    <div class="u-handbar u-handbar1" id="u-handbar1-b">
                        <div class="u-hand"></div>
                    </div>
                </div>
                <div class="u-boxcon needleft">
                    <div class="u-box" style="background: #ddd9c3"></div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var lastData = null, si = null;
    var url = getUrl("test");
    var request = new GetRequest();

    console.log("request: " + request);

    var showval = request.type;
    if ('WebSocket' in window) {
        websocket = new WebSocket(url + '/' + request.line + '/' + request.index);
        // websocket =new WebSocket("ws://localhost:8080/webSocket"+'/'+request.line+'/'+request.index);
    } else {
        alert('Not support websocket')
    }
    //if (request.line == "A") {
    //	$('.lineB').hide();
    //	$('.lineA').show();
    //}else if (request.line == "B") {
    //	$('.lineA').hide();
    //	$('.lineB').show();
    //}
    websocket.onerror = function () {
        $('.u-boxcon').addClass('stop');
    };

    websocket.onopen = function (event) {
        $('.u-boxcon').removeClass('stop');
    }

    function count(obj, index) {
        var abmax = 0;
        // if (request.line == "B") {
        // 	abmax = 11;
        // }else if(request.line == "A"){
        // 	abmax = 6;
        // }
        for (var i = 0, val; val = obj[i++];) {
            if (val.silicon_id && val.silicon_id != '0') {
                $('.u-box-p' + val.stack_index).html(val.silicon_id);
                if (val.silicon_status == 1) {
                    if (val.stack_index >= abmax) {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('break1');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('break1');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('break');
                        } else {
                            $('.u-box' + val.stack_index).addClass('break');
                        }
                    } else {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('prewprinted');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('break1');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('break');
                        } else {
                            $('.u-box' + val.stack_index).addClass('break');
                        }
                    }
                } else if (val.silicon_status == 0) {
                    if (val.stack_index >= abmax) {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('backprinted');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('backprinted2');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('printed1');
                        } else {
                            $('.u-box' + val.stack_index).addClass('printed');
                        }
                    } else {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('prewprinted');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('backprinted');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('normal');
                        } else {
                            $('.u-box' + val.stack_index).addClass('printed1');
                        }
                    }
                } else {
                    if (val.stack_index >= abmax) {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('backprinted');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('backprinted2');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('printed1');
                        } else {
                            $('.u-box' + val.stack_index).addClass('printed');
                        }
                    } else {
                        if (index == 1) {
                            $('.u-box' + val.stack_index).addClass('prewprinted');
                        } else if (index == 2) {
                            $('.u-box' + val.stack_index).addClass('backprinted');
                        } else if (index == 3) {
                            $('.u-box' + val.stack_index).addClass('normal');
                        } else {
                            $('.u-box' + val.stack_index).addClass('printed1');
                        }
                    }
                }
            }
        }
    }

    function addanimate(obj) {
        for (var i = 0; i < obj.length; i++) {
            (function (i) {
                if (obj[i].isPause == 0) {
                    if (obj[i].stack_index == 4 || obj[i].stack_index == 5) {
                        $('.u-machine').addClass('rotate');
                        $('.needrotatee').addClass('rotatee');
                    } else {
                        //$('.needleft').addClass('moveleft');
                        $('.u-box' + obj[i].stack_index).parent().addClass('moveleft');
                    }
                }

                // if (obj[i].stack_index == "1") {
                // 	switch (obj[i].isCache)
                // 	{
                // 	  case 0:
                //
                // 	  	break;
                // 	  case 1:
                // 	  	$('.u-handbar1').addClass('drop');
                // 		$('.u-box1').addClass('movedown');
                // 	  	break;
                // 	  default:
                //
                // 	}
                // }
            })(i);
        }
    }

    websocket.onmessage = function (event) {
        //$('.u-box7').removeClass('backprinted');
        $('#u-boxe').addClass('moveleft');
        //console.log(typeof(event.data));

        si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
        console.log(si);
        if (!lastData) {
            count(si.stack_list, showval);
        }
        changeColor($('.t-status'), si.p2);
        addanimate(si.stack_list);
        //$('.needleft').addClass('moveleft');
        if (si.isPause1 == 0) {
            $('.u-adjust1.u-adjusttop').addClass('u-adjustup');
            $('.u-adjust1.u-adjustbottom').addClass('u-adjustdown');
        } else if (si.isPause1 == 1) {
            $('.u-adjust1.u-adjusttop').removeClass('u-adjustup');
            $('.u-adjust1.u-adjustbottom').removeClass('u-adjustdown');
        }
        if (si.isPause2 == 0) {
            $('.u-adjust2.u-adjusttop').addClass('u-adjustup');
            $('.u-adjust2.u-adjustbottom').addClass('u-adjustdown');
        } else if (si.isPause2 == 1) {
            $('.u-adjust2.u-adjusttop').removeClass('u-adjustup');
            $('.u-adjust2.u-adjustbottom').removeClass('u-adjustdown');
        }

        errorRender();

        lastData = si;
    }

    document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function () {
        //$('.u-box7').removeClass('backprinted');
        $('.u-boxcon').removeClass('moveleft');
        $('.u-box14').show();
        //console.time('1');
        reset();
        count(si.stack_list, showval);
        //console.timeEnd('1');
    }, false);


    document.getElementById('rotatea').addEventListener("webkitAnimationIteration", function () {
        if (showval == 1) {
            $('.u-box-change').removeClass('backprinted');
        } else if (showval == 2) {
            $('.u-box-change').removeClass('backprinted2');
        } else if (showval == 3) {
            $('.u-box-change').removeClass('printed1');
        } else if (showval == 4) {
            $('.u-box-change').removeClass('printed');
        }
        $('.needrotatee').removeClass('rotatee');
        $('.u-machine').removeClass('rotate');

        if (si.isPause3 == 0) {
            if (si.print_mode == 0) {
                $('.u-scanline').addClass('scan');
            } else if (si.print_mode == 1) {
                $('.u-scanline').addClass('scan1');
            }
        } else if (si.isPause3 == 1) {
            $('.u-scanline').removeClass('scan');
            $('.u-scanline').removeClass('scan1');
        }
    }, false);


    document.getElementById('rotatea-b').addEventListener("webkitAnimationIteration", function () {
        if (showval == 1) {
            $('.u-box-change').removeClass('backprinted');
        } else if (showval == 2) {
            $('.u-box-change').removeClass('backprinted2');
        } else if (showval == 3) {
            $('.u-box-change').removeClass('printed1');
        } else if (showval == 4) {
            $('.u-box-change').removeClass('printed');
        }
        $('.needrotatee').removeClass('rotatee');
        $('.u-machine').removeClass('rotate');
        if (si.isPause3 == 0) {
            if (si.print_mode == 0) {
                $('.u-scanline').addClass('scan');
            } else if (si.print_mode == 1) {
                $('.u-scanline').addClass('scan1');
            }

        } else if (si.isPause3 == 1) {
            $('.u-scanline').removeClass('scan');
            $('.u-scanline').removeClass('scan1');
        }
    }, false);
    document.getElementById('u-scanline').addEventListener("webkitAnimationIteration", function () {
        $('.u-scanline').removeClass('scan');
        $('.u-scanline').removeClass('scan1');
        if (si.stack_list.length >= 7) {
            if (showval == 1) {
                $('.u-box-change').addClass('backprinted');
            } else if (showval == 2) {
                $('.u-box-change').addClass('backprinted2');
            } else if (showval == 3) {
                $('.u-box-change').addClass('printed1');
            } else if (showval == 4) {
                $('.u-box-change').addClass('printed');
            }
        }

    }, false);
    document.getElementById('u-scanline-b').addEventListener("webkitAnimationIteration", function () {
        $('.u-scanline').removeClass('scan');
        $('.u-scanline').removeClass('scan1');
        if (si.stack_list.length >= 7) {
            if (showval == 1) {
                $('.u-box-change').addClass('backprinted');
            } else if (showval == 2) {
                $('.u-box-change').addClass('backprinted2');
            } else if (showval == 3) {
                $('.u-box-change').addClass('printed1');
            } else if (showval == 4) {
                $('.u-box-change').addClass('printed');
            }
        }

    }, false);
    document.getElementById('u-handbar1').addEventListener("webkitAnimationIteration", function () {
        $('.u-handbar1').removeClass('grow');
        $('.u-handbar1').removeClass('drop');
    }, false);
    document.getElementById('u-handbar2').addEventListener("webkitAnimationIteration", function () {
        $('.u-handbar2').removeClass('grow');
        $('.u-handbar2').removeClass('drop');
    }, false);
    document.getElementById('u-box1').addEventListener("webkitAnimationIteration", function () {
        $('.u-box1').removeClass('moveup');
        $('.u-box1').removeClass('movedown');
    }, false);
    document.getElementById('u-box14').addEventListener("webkitAnimationIteration", function () {
        $('.u-box14').removeClass('moveup');
        $('.u-box14').removeClass('movedown');
    }, false);

    document.getElementById('u-handbar1-b').addEventListener("webkitAnimationIteration", function () {
        $('.u-handbar1').removeClass('grow');
        $('.u-handbar1').removeClass('drop');
    }, false);
    document.getElementById('u-handbar2-b').addEventListener("webkitAnimationIteration", function () {
        $('.u-handbar2').removeClass('grow');
        $('.u-handbar2').removeClass('drop');
    }, false);
    document.getElementById('u-box1-b').addEventListener("webkitAnimationIteration", function () {
        $('.u-box1').removeClass('moveup');
        $('.u-box1').removeClass('movedown');
    }, false);
    document.getElementById('u-box14-b').addEventListener("webkitAnimationIteration", function () {
        $('.u-box14').removeClass('moveup');
        $('.u-box14').removeClass('movedown');
    }, false);
    window.onbeforeunload = function () {
        websocket.close();
    }
</script>
</body>
</html>